<template>
    <baseView>
        <div class="monthClean">
            <!-- {{params.date}} -->
            <DataTableV2 :tableColumn="tableColumn" :size="[15,20,25]" :fetchApi="MonthOutput" :params="params" ref="tableRef">
                <!-- 查询 -->
                <template #search>
                    <div class="form-box">
                        <el-form :inline="true">
                            <el-form-item label="路段名称">
                                <routeSelect v-model:selectValue="params.routeid"> </routeSelect>
                            </el-form-item>
                            <el-form-item label="商铺名称">
                                <el-input v-model="params.shopname" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="日期">
                                <el-date-picker v-model="params.date" type="month" value-format="YYYY-MM"
                                    :clearable="false" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchTable">
                                    <el-icon style="margin-right: 2px;">
                                        <Search />
                                    </el-icon>查询
                                </el-button>
                                <el-button type="primary" plain @click="reset">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                </template>
                <template #dry="{ row }">
                    {{ row.dry }}桶 {{ row.dryweight }}kg
                </template>
                <template #wet="{ row }">
                    {{ row.wet }}桶 {{ row.wetweight }}kg
                </template>
                <template #food="{ row }">
                    {{ row.wet }}桶 {{ row.wetweight }}kg
                </template>
            </DataTableV2>
        </div>
    </baseView>

</template>

<script setup>
import { MonthOutput } from "@/api/cleanCategory"
import dayjs from "dayjs"
const tableColumn = ref([
    {
        label: '路段名称',
        prop: 'routename',
    },
    {
        label: '商铺名称',
        prop: 'shopname',
    },
    {
        label: '干垃圾',
        prop: "dry",
        slot: true
    },
    {
        label: '湿垃圾',
        prop: "wet",
        slot: true
    },
    {
        label: '餐厨垃圾',
        prop: "food",
        slot: true
    }
])

const tableRef = ref(null)
function searchTable() {
    params.value.pagenum = 1
    tableRef.value.fetchList()
}

const params = ref({
    routeid: "",
    shopname: "",
    date: dayjs().format("YYYY-MM"),
    pagenum: 1,
    pagesize: 15
})

function reset() {
    params.value = {
        routeid: "",
        shopname: "",
        date: dayjs().format("YYYY-MM-DD"),
        pagenum: 1,
        pagesize: 15
    }
    nextTick(() => {
        searchTable()
    })
}

</script>

<style lang="scss" scoped>
.monthClean {
    height: 100%;
    width: 100%;
    position: relative;
}

.form-box {
    display: flex;
    justify-content: flex-end;
}

.paginStyle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

}
</style>